<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 视频播放页 </title>
    <link rel="stylesheet" href="bootstrap-5.1.1-dist/css/bootstrap.min.css" >
    <style>
        .title{
            //background-color: turquoise;
        }

        .video{
            height: 50%;
            weight:50%;
            background-color: #100f0f;
        }
        .tou{
            weight:50px;
            height: 50px;
            border-radius:100% ;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row" style=" margin-top:6%">
                <div class="col-2">
                </div>
        <div class="col-8">
            <div class="row">
                <div class="col-8"  >
                    <div class="title">
                        <h3>标题</h3>
                        <h6>播放量,弹幕,发布时间</h6>
                    </div>
                    <div class="video">
                   <video>
                   </video>
                </div>
                    <p>作者留言</p>
                    <p>评论</p>

                    <div class="row">
                    <div class="col-2">
                        <img src="1.jpeg" class="tou">
                    </div>
                    <div class="col-10">
                        <form>
                            <textarea name="" rows="2" cols="45"></textarea>
                            <input type="submit"   value="发表评论">
                        </form>
                    </div>
                        <p style="color: #cbbcbc">————————————————————————————————</p>
                    </div>


                    <div class="row">
                        <div class="col-2">
                            <img src="2.jpeg" class="tou">
                        </div>
                        <div class="col-10">
                             <p>谢谢观看</p>
                        </div>
                        <p style="color: #cbbcbc">————————————————————————————————</p>
                    </div>



                    <div aria-label="Page navigation example">
                        <ul class="pagination pagination-centered">
                            <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                        </ul>
                    </div>

                </div>
                <div class="col-4">
                    <div>
                        <div class="row">
                            <div class="col-3"  ><img src="2.jpeg" class="tou"></div>
                            <div class="col-6"  >
                                <h6>作者姓名</h6>
                                <h6>作者介绍</h6>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-5" >相关视频</div>
                            <div class="col-5"> </div>
                        </div>

                        <div>
                            <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                    <div class="col-md-6">
                                        <img src="1.jpeg"  class="img-fluid rounded-start" alt="...">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card-body">
                                            <h6 class="card-title"> 视频标题  </h6>
                                            <p class="card-text"><small class="text-muted">作者 </small></p>
                                            <p class="card-text"><small class="text-muted">播放量： </small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                            <br>
                        <div>
                            <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                    <div class="col-md-6">
                                        <img src="1.jpeg"  class="img-fluid rounded-start" alt="...">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card-body">
                                            <h6 class="card-title"> 视频标题  </h6>
                                            <p class="card-text"><small class="text-muted">作者 </small></p>
                                            <p class="card-text"><small class="text-muted">播放量： </small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
<br>
                        <div>
                            <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                    <div class="col-md-6">
                                        <img src="1.jpeg"  class="img-fluid rounded-start" alt="...">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card-body">
                                            <h6 class="card-title"> 视频标题  </h6>
                                            <p class="card-text"><small class="text-muted">作者 </small></p>
                                            <p class="card-text"><small class="text-muted">播放量： </small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
<br>
                        <div>
                            <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                    <div class="col-md-6">
                                        <img src="1.jpeg"  class="img-fluid rounded-start" alt="...">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card-body">
                                            <h6 class="card-title"> 视频标题  </h6>
                                            <p class="card-text"><small class="text-muted">作者 </small></p>
                                            <p class="card-text"><small class="text-muted">播放量： </small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
<br>
                        <div>
                            <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                    <div class="col-md-6">
                                        <img src="1.jpeg"  class="img-fluid rounded-start" alt="...">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card-body">
                                            <h6 class="card-title"> 视频标题  </h6>
                                            <p class="card-text"><small class="text-muted">作者 </small></p>
                                            <p class="card-text"><small class="text-muted">播放量： </small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>


                <div class="col-2">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>